<!DOCTYPE html>
<html style="height: 100%" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <script th:src="@{/layui/layui.js}"></script>
</head>

<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<script type="text/javascript">


    layui.use('jquery', function () {
        var $ = layui.jquery;
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        $.ajax({
            url: "/reports/tocountReports",
            type: "GET",
            dataType: "json",
            success: function (d) {
                var region = []
                var total = []
                for (var i = 0; i < d.length; i++) {
                    region[i] = d[i].region
                    total[i] = d[i].total
                }
                option = {
                    xAxis: {
                        type: 'category',
                        data: region
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: total,
                        type: 'bar'
                    }]
                };
                ;
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            }

        })
    })


</script>
</body>
</html>